{% extends 'base.html' %}
{% load score %}

{% block title_suffix %}
    | My Progress
{% endblock %}

{% block stylesheets %}
{% endblock %}

{% block content %}
	<div class="page-header">
		<h1>My Progress <small>Stats from the Diagnostic Test</small></h1>
	</div>
	<p class="lead">
		Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. 
	</p>
	<p>
		Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
	</p>

	<legend>The Book <a class="btn btn-primary btn-small pull-right" href="{% url 'page.views.take_diagnostic' %}">Take the Diagnostic Test</a></legend>
	<table id="progress-table" class="table table-condensed table-bordered table-striped">
		<thead>
			<th>Chapter</th>
			<th style="text-align: center;">Progress Check</th>
			<th>Diagnostic Test Score</th>
		</thead>
	    <tbody>
	    	{% for key,result in results.items %}
		    	<tr>
			    	<td>
			    		<a href="result.page.get_absolute_url">
			    			{{ result.page.title }}
			    		</a>
			    	</td>
			    	<td style="text-align: center;">
			    		<a href="">
			    			<i class="icon-pencil"></i>
			    		</a>
			    	</td>
			    	<td>
			    		{% if result %}
			    		<div class="progress progress-danger">
							<div class="bar {% score_colour result.procent %}" style="width:{{result.procent}}%">{{result.procent}} %</div>
						</div>
						{% else %}
						-
						{% endif %}
			    	</td>
				</tr>
			{% empty %}
				<tr class="info">
		    		<td colspan="3">No pages to display</td>
				</tr>
			{% endfor %}
	    </tbody>
    </table>
	</table>


	</ul>
{% endblock %}

{% block scripts %}
{% endblock %}